<template>
    <div class="classic-demo">
        <div class="author-demo">
            <div>作者：陈炼，张璐奕</div>
            <div>日期：2017/11/02</div>
        </div>
        <div class="logistics-layout-detail">
            <p style="color: #f00">
                每对li为一个整体，若单行空间不够则整体换行。<br />
                b标签为深色加粗标题，span标签为浅色内容，可自由组合。<br />
                如特殊情况需要改变宽度，请对b标签或span标签的min-width属性进行修改。
            </p>
            <section>

                <h3>一对一</h3>
                <div v-html="html_r1c1"></div>
                <pre style="background-color: #ececec;">
                    <code class="html" v-text="html_r1c1">
                    </code>
                </pre>

            </section>

            <section>
                <h3>一对多</h3>


                <div v-html="html_r1c3_1"></div>
                <pre style="background-color: #ececec;">
                    <code class="html" v-text="html_r1c3_1">
                    </code>
                </pre>


                <div v-html="html_r1c0_1"></div>
                <pre style="background-color: #ececec;">
                    <code class="html" v-text="html_r1c0_1">
                    </code>
                </pre>

            </section>
        </div>
        <section>
            <h3>一行一列</h3>
            <div class="zlst-classic-form-detailsList clearfix">
                <span class="zlst-classic-form-detailsTitle">调拨时间</span>
                <em class="zlst-classic-form-detailsContent">2017-05-05</em>
            </div>
            <div class="zlst-classic-form-detailsList clearfix">
                <span class="zlst-classic-form-detailsTitle">调拨时间</span>
                <em class="zlst-classic-form-detailsContent">2017-05-05</em>
            </div>
            <div class="zlst-classic-form-detailsList clearfix">
                <span class="zlst-classic-form-detailsTitle">调拨时间</span>
                <em class="zlst-classic-form-detailsContent">2017-05-05</em>
            </div>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode0">
                </code>
            </pre>
        </section>
        <section>
            <h3>特殊样式</h3>
            <div class="zlst-classic-form-special">
                <h3>物料信息</h3>
                <span class="form-special-name">A物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>
                <div>
                    <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em>
                </div>
                <span class="form-special-name">B物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>
                <div>
                    <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em>
                </div>
                <span class="form-special-name">C物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>
                <div>
                    <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em><em>预报数量：12减</em><em>预报数量：12减</em>
                </div>
            </div>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode1">
                </code>
            </pre>
            <div class="zlst-classic-form-special">
                <h3>物料信息</h3>
                <span class="form-special-name">B物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>
                <div class="clearfix">
                    <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em>
                    <span class="button"><z-button type="ensure" shape="rect"></z-button></span>
                </div>
                <span class="form-special-name">C物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>
                <div class="clearfix">
                    <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em><em>预报数量：12减</em><em>预报数量：12减</em>
                    <span class="button"><z-button type="ensure" shape="rect"></z-button></span>
                </div>
            </div>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode2">
                </code>
            </pre>
        </section>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                html_r1c1: `
                <div class="zlst-detail-wrap-primary">
                    <ul class="zlst-detail-list-primary">
                        <li>
                            <b>车辆归属</b>
                            <span> 自有/个人/承运商 </span>
                        </li>
                        <li>
                            <b>服务单位</b>
                            <span> 内蒙古包头/湖南长沙 </span>
                        </li>
                        <li>
                            <b>车辆类型</b>
                            <span> 牵引车/挂车/一体车 </span>
                        </li>
                    </ul>
                </div>
                `,

                html_r1c3_1: `
                <div class="zlst-detail-wrap-primary">
                    <ul class="zlst-detail-list-primary">
                        <li>
                            <b>车辆归属</b>
                            <span> 自有/个人/承运商 </span>
                            <span> 内蒙古包头/湖南长沙 </span>
                            <span>dataDetails.mDrivePhone</span>
                        </li>
                        <li>
                            <b>所在区域</b>
                            <span> 湖南省 长沙市岳麓区潇湘大道滨河路口963号 </span>
                        </li>
                        <li>
                            <b>车辆类型</b>
                            <span> 牵引/低栏/中栏/高栏/厢车/平板/面包车 </span>
                            <span> 张三/李四/王五 </span>
                            <span>dataDetails.mDrivePhone</span>
                        </li>
                    </ul>
                </div>
                `,

                html_r1c3_2: `
                <div class="zlst-detail-wrap-primary">
                    <ul class="zlst-detail-list-primary">
                        <li>
                            <b>车辆归属</b>
                            <span> 自有/个人/承运商 </span>
                            <b>所在区域</b>
                            <span> 内蒙古包头/湖南长沙 </span>
                            <b>车辆类型</b>
                            <span>dataDetails.mDrivePhone</span>
                        </li>
                        <li>
                            <b>所在区域</b>
                            <span> 牵引/低栏/中栏/高栏/厢车/平板/面包车 </span>
                            <b>服务单位</b>
                            <span> 张三/李四/王五 </span>
                            <b>车辆归属</b>
                            <span>dataDetails.mDrivePhone</span>
                        </li>
                    </ul>
                </div>
                `,

                html_r1c0_1: `
                <div class="zlst-detail-wrap-primary">
                    <ul class="zlst-detail-list-primary">
                        <li>
                            <b>车辆归属</b>
                            <span> 自有/个人/承运商 </span>
                            <span> 内蒙古包头/湖南长沙 </span>
                            <span> 张三/李四/王五 </span>
                            <span>dataDetails.mDrivePhone</span>
                            <span> 牵引/低栏/中栏/高栏/厢车/平板/面包车 </span>
                        </li>
                    </ul>
                </div>
                `,
                htmlCode0:
                '           <div class="zlst-classic-form-detailsList">\n' +
                '             <span class="zlst-classic-form-detailsTitle">调拨时间</span>\n' +
                '             <em class="zlst-classic-form-detailsContent">2017-05-05</em>\n' +
                '           </div>\n'+
                '           <div class="zlst-classic-form-detailsList">\n' +
                '             <span class="zlst-classic-form-detailsTitle">调拨时间</span>\n' +
                '             <em class="zlst-classic-form-detailsContent">2017-05-05</em>\n' +
                '           </div>\n'+
                '           <div class="zlst-classic-form-detailsList">\n' +
                '             <span class="zlst-classic-form-detailsTitle">调拨时间</span>\n' +
                '             <em class="zlst-classic-form-detailsContent">2017-05-05</em>\n' +
                '           </div>\n',
                htmlCode1: '<div class="zlst-classic-form-special">\n' +
                '            <h3>物料信息</h3>\n' +
                '            <span class="form-special-name">A物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>\n' +
                '            <div>\n' +
                '                <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em>\n' +
                '            </div>\n' +
                '            <span class="form-special-name">B物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>\n' +
                '            <div>\n' +
                '                <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em>\n' +
                '            </div>\n' +
                '            <span class="form-special-name">C物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>\n' +
                '            <div>\n' +
                '                <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em><em>预报数量：12减</em><em>预报数量：12减</em>\n' +
                '            </div>\n' +
                '        </div>',
                htmlCode2: '<div class="classic-page-form-special">\n' +
                '            <h3>物料信息</h3>\n' +
                '            <span class="form-special-name">B物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>\n' +
                '            <div class="clearfix">\n' +
                '                <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em>\n' +
                '                <span class="button"><z-button type="ensure" shape="rect"></z-button></span>\n' +
                '            </div>\n' +
                '            <span class="form-special-name">C物料（389094）</span><i class="iconfont icon-jiliang"></i><i class="iconfont icon-jianhuayan"></i>\n' +
                '            <div class="clearfix">\n' +
                '                <em>卸货仓库：电解一厂氧化铝库</em><em>物料批次号：12</em><em>预报重量：12吨</em><em>预报数量：12减</em><em>预报数量：12减</em><em>预报数量：12减</em>\n' +
                '                <span class="button"><z-button type="ensure" shape="rect"></z-button></span>\n' +
                '            </div>\n' +
                '        </div>',
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.classic-demo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>

